<template>
  <view class="detail-view">
    <view class="top-view clearfix">
      <view class="float_left">
        <text
          v-if="bill_detail.auditStatus === 2"
          class="status-tag status-approved"
          >已审核</text
        >
        <text v-else class="status-tag status-pending">未审核</text>
      </view>
    </view>
    <view class="detail-cont">
      <view class="info-li clearfix">
        <view class="label">单据编号</view>
        <view class="value" @click="copy(bill_detail.no)">
          <u-icon
            margin-right="20"
            label-pos="left"
            :label="bill_detail.no || ''"
            name="copy"
            custom-prefix="custom-icon"
            size="24"
          ></u-icon>
        </view>
      </view>
      <view class="info-li clearfix">
        <view class="label">出库类型12</view>
        <view class="value">{{ bill_detail.typeName || "" }}</view>
      </view>
      <view class="info-li clearfix" v-if="bill_detail.typeName !== '调拨出库'">
        <view class="label">客户</view>
        <view class="value">{{ bill_detail.customerName || "" }}</view>
      </view>
      <view class="info-li clearfix" v-else>
        <view class="label">调出仓库</view>
        <view class="value">{{ out_warehouse_data[0].warehouseName }}</view>
      </view>
      <view class="info-li clearfix">
        <view class="label">制单人</view>
        <view class="value">{{ bill_detail.operatorName || "" }}</view>
      </view>
      <view class="info-li clearfix">
        <view class="label">制单时间</view>
        <view class="value">{{
          $u.timeFormat(bill_detail.createTime, "yyyy-mm-dd hh:MM:ss")
        }}</view>
      </view>
      <view class="info-li clearfix" v-if="bill_detail.auditStatus === 2">
        <view class="label">审核人</view>
        <view class="value">{{ bill_detail.auditName || "" }}</view>
      </view>
      <view class="info-li clearfix" v-if="bill_detail.auditStatus === 2">
        <view class="label">入库时间</view>
        <view class="value">{{
          $u.timeFormat(bill_detail.auditTime, "yyyy-mm-dd hh:MM:ss")
        }}</view>
      </view>
      <!-- 未分配仓库 -->
      <view class="goods-view-box" v-if="unassigned_sku_data.length">
        <view class="goods-title">未分配仓库</view>
        <view class="goods-ul">
          <view
            class="goods-li clearfix"
            v-for="(item, index) in unassigned_sku_data"
            :key="index"
          >
            <view class="info">
              <block v-if="item.warehouseSelect && item.warehouseSelect.length">
                <view
                  v-if="bill_detail.isDistribution === 5"
                  class="goods-warehouse clearfix"
                  @click="openUnWarahouse(item, index)"
                >
                  <view class="float_left ellipsis">{{
                    item.warehouseName || "请选择仓库"
                  }}</view>
                  <view class="float_right"
                    ><u-icon
                      name="arrow-down"
                      size="28"
                      color="#FB5904"
                    ></u-icon
                  ></view>
                </view>
              </block>
              <block v-else>
                <view class="goods-warehouse clearfix">
                  <view class="float_left" style="color: #808080"
                    >无可用仓库</view
                  >
                </view>
              </block>
              <view class="goods-name">
                <view class="float_left ellipsis">{{ item.materielName }}</view>
                <view class="float_right">{{ item.materielCode }}</view>
              </view>
              <view class="goods-num clearfix">
                <view class="float_left"
                  >{{ item.unitName }};{{ item.skuName }}</view
                >
                <view class="float_right">
                  <text
                    >{{ $utils.formatNub(item.num) }}x{{
                      $utils.formatNub(item.unitPrice)
                    }}=</text
                  >
                  <text class="price"
                    >¥{{
                      $NP.times(Number(item.unitPrice), Number(item.num))
                    }}</text
                  >
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 仓库出库数据-->
      <block v-for="(ware, iw) in out_warehouse_data" :key="iw">
        <view class="goods-view-box" v-if="ware.details.length">
          <view class="goods-title">{{ ware.warehouseName }}</view>
          <view class="goods-ul">
            <view
              class="goods-li clearfix"
              v-for="(item, index) in ware.details"
              :key="index"
            >
              <view class="info">
                <view
                  v-if="bill_detail.isDistribution === 5"
                  class="goods-warehouse clearfix"
                  @click="openWarahouse(iw, index, item)"
                >
                  <view class="float_left ellipsis">{{
                    item.warehouseName
                  }}</view>
                  <view class="float_right"
                    ><u-icon
                      name="arrow-down"
                      size="28"
                      color="#FB5904"
                    ></u-icon
                  ></view>
                </view>
                <view v-else class="goods-warehouse clearfix">
                  <view class="float_left ellipsis">{{
                    item.warehouseName
                  }}</view>
                </view>
                <view class="goods-name">
                  <view class="float_left ellipsis">{{
                    item.materielName
                  }}</view>
                  <view class="float_right">{{ item.materielCode }}</view>
                </view>
                <view class="goods-num clearfix">
                  <view class="float_left"
                    >{{ item.unitName }};{{ item.skuName }}</view
                  >
                  <view class="float_right">
                    <text>x{{ $utils.formatNub(item.total) }}</text>
                    <text v-if="!!item.extend && item.extend !== 'null'"
                      >（{{ item.extend.u_1_buy }}{{ item.extend.u_1 }}）</text
                    >
                  </view>
                </view>
                <view class="num-ul">
                  <view class="num-li">
                    <view class="label">出库量</view>
                    <view class="value">
                      <text v-if="bill_detail.auditStatus === 2">{{
                        $utils.formatNub(item.outNum)
                      }}</text>
                      <input
                        v-else
                        @blur="saleNumBlur(item.num, index, iw, item)"
                        type="digit"
                        v-model="item.num"
                      />
                    </view>
                  </view>
                  <view
                    class="num-li"
                    v-if="!!item.extend && item.extend !== 'null'"
                  >
                    <view class="label">其他单位</view>
                    <view class="value">
                      <text v-if="bill_detail.auditStatus === 2">{{
                        $utils.formatNub(item.otherNum)
                      }}</text>
                      <input v-else type="digit" v-model="item.otherNum" />
                    </view>
                  </view>
                  <view v-if="enableLocationManagement === 5" class="num-li">
                    <view class="label">库位</view>
                    <view class="value">
                      <input
                        @click="selLocation(iw, index, ware.warehouseId, item)"
                        disabled
                        :placeholder="
                          bill_detail.auditStatus === 2 ? '未设置' : '请选择'
                        "
                        placeholder-class="input-pl"
                        v-model="item.storageLocationName"
                      />
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </block>

      <!-- 商品清单 -->
      <view class="goods-view-box">
        <view class="goods-title">商品清单</view>
        <view class="goods-ul">
          <view
            class="goods-li clearfix"
            v-for="(item, index) in bill_detail.details"
            :key="index"
          >
            <view class="goods-img float_left">
              <image
                :src="
                  item.images && item.images.length
                    ? item.images[0]
                    : '../../static/img/goods.png'
                "
                mode="aspectFill"
              ></image>
            </view>
            <view class="float_left info list-info">
              <view class="goods-name ellipsis">{{ item.materielName }}</view>
              <view class="goods-code">{{ item.materielCode }}</view>
              <view class="goods-num clearfix">
                <view class="float_left"
                  >{{ item.unitName }};{{ item.skuName }}</view
                >
                <view class="float_right">
                  <text v-if="bill_detail.auditStatus === 2"
                    >x{{ $utils.formatNub(item.outNum) }}</text
                  >
                  <text v-else>x{{ $utils.formatNub(item.num) }}</text>
                  <text v-if="item.isEq === 5"
                    >（{{ $utils.formatNub(item.u_1_buy)
                    }}{{ item.u_1 }}）</text
                  >
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="remark-li">
        <view class="label">备注</view>
        <view class="remark">
          <text>{{ bill_detail.remark || "无" }}</text>
        </view>
      </view>
    </view>
    <view
      v-if="bill_detail.auditStatus === 2 && bill_detail.deliveryType === 3"
      class="detail-bottom"
    >
      <view
        class="handel-btn"
        @click="
          goPage(
            `/pagesT/stock/setLogistics?sourceId=${bill_detail.sourceId}&&type=${bill_detail.type}&&outId=${bill_detail.id}`
          )
        "
        >设置物流信息</view
      >
    </view>
    <view
      v-if="
        $accessCheck($Access.InventoryOutUpdateInventoryOutStatus) &&
        bill_detail.auditStatus !== 2
      "
      class="detail-bottom"
    >
      <view
        class="handel-btn"
        @click="openModel('确定要审核该出库单吗？', '审核')"
        >审核</view
      >
    </view>
    <u-modal
      v-model="model_show"
      :show-cancel-button="true"
      :content="model_content"
      @confirm="modelConfirm"
      @cancel="modelCancel"
    ></u-modal>
    <u-select
      value-name="warehouseId"
      label-name="warehouseName"
      @confirm="warehouseConfirm"
      v-model="warehouse_show"
      :list="warehouse_list"
    ></u-select>
  </view>
</template>

<script>
export default {
  data() {
    return {
      warahouse_tag: 5, // 仓库选择类型 4 未选择仓库，5 已分配仓库
      un_warehouse_obj: {},
      warehouse_obj: {},
      warehouse_show: false, //选择仓库
      warehouse_list: [],
      model_tag: "",
      model_show: false,
      model_content: "",
      bill_id: 0,
      bill_detail: {},
      goods_index: 0,
      out_index: 0,
      out_warehouse_copy: [],
      out_warehouse_data: [], // 商品清单，按仓库分
      unassigned_sku_data: [], // 未出库商品
      sku_total: {},
      areaBysku: "",
    };
  },
  onPullDownRefresh() {
    this.getInventoryOutInfo();
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo;
    },
    enableLocationManagement() {
      return parseInt(this.$store.state.basicSet.enableLocationManagement);
    },
  },
  watch: {
    areaBysku(val) {
      if (val) {
        const target = this.$u.deepClone(this.out_warehouse_data);
        target[this.out_index].details[this.goods_index] = {
          ...target[this.out_index].details[this.goods_index],
          areaId: val.areaId,
          areaName: val.areaName,
          areaCode: val.areaCode,
          storageLocationId: val.storageLocationId,
          storageLocationName: val.storageLocationName,
          storageLocationCode: val.storageLocationCode,
        };
        this.out_warehouse_data = target;
      }
    },
  },
  onLoad(options) {
    this.bill_id = options.id;
    this.getInventoryOutInfo();
  },
  // onShow() {
  // 	this.bill_id = options.id;
  // 	this.getInventoryOutInfo();
  // },
  methods: {
    // 去选择库区库位页面
    selLocation(iw, index, warehouseId, row) {
      if (this.bill_detail.auditStatus === 2) {
        return;
      }
      this.out_index = iw;
      this.goods_index = index;
      this.goPage(
        `/pagesT/stock/WarehouseRegionBySku?basicGoodsId=${row.materielId}&skuId=${row.skuId}&warehouseId=${warehouseId}`
      );
    },
    // 详情
    getInventoryOutInfo() {
      this.$u.api
        .getInventoryOutInfo(this.bill_id)
        .then((res) => {
          uni.stopPullDownRefresh();
          const data = res.data;
          this.bill_detail = data;
          this.out_warehouse_copy = this.$u.deepClone(data.outWarehouseData);
          // 存一下未修改的原始出库数量
          data.outWarehouseData.forEach((item) => {
            item.details.forEach((goods) => {
              goods.numCopy = Number(goods.num);
              // 抄嘛商品默认为空
              if (goods.extend !== "null" && !!goods.extend) {
                goods.extend = JSON.parse(goods.extend);
                if (!Number(goods.otherNum)) {
                  goods.otherNum = this.$NP.divide(
                    goods.numCopy,
                    goods.extend.conversion
                  );
                }

                goods.num = "";
              } else {
                goods.num = Number(goods.num);
              }
            });
          });
          // 商品清单，按仓库分
          this.out_warehouse_data = data.outWarehouseData;
          // 未出库商品
          this.unassigned_sku_data = data.UnassignedSkuData;
          this.sku_total = data.skuTotal;
        })
        .catch((err) => {
          uni.stopPullDownRefresh();
        });
    },
    // 打开仓库选择器
    openWarahouse(index, rowI, row) {
      this.warahouse_tag = 5;
      this.warehouse_list = row.warehouseSelect;
      this.warehouse_show = true;
      this.warehouse_obj = {
        index: index,
        rowI: rowI,
        row: row,
      };
    },
    warehouseConfirm(arr) {
      if (this.warahouse_tag === 5) {
        this.warehouseChange(arr[0], this.warehouse_obj);
      } else {
        this.unWarehouseChange(arr[0], this.un_warehouse_obj);
      }
      this.warehouse_show = false;
    },
    // 获取当前合计销售量
    totalNumChange(target, row) {
      // 设置变量num
      let num = 0;
      target.forEach((item) => {
        const goods = item.details.find((item) => item.skuId === row.skuId);
        if (goods) {
          // 加上当前商品销售量
          num = this.$NP.plus(num, goods.num);
        }
      });
      return num;
    },
    // 切换仓库
    warehouseChange(obj, { index, rowI, row }) {
      const val = obj.value;
      // 深拷贝一份商品数据
      const target = this.$u.deepClone(this.out_warehouse_data);
      // 在要出库的列表中查找当前切换的仓库是否存在
      const wIndex = target.findIndex((item) => item.warehouseId === val);
      if (wIndex > -1) {
        // 当前仓库存在
        // 查找商品是否存在
        const gIndex = target[wIndex].details.findIndex(
          (item) => item.skuId === row.skuId
        );
        if (gIndex > -1) {
          // 商品存在
          // 累加销售量
          target[wIndex].details[gIndex].num = this.$NP.plus(
            target[wIndex].details[gIndex].num,
            row.num
          );
        } else {
          // 商品不存在，添加该商品
          target[wIndex].details.push({
            ...row,
            warehouseId: val,
            warehouseName: obj.label,
          });
        }
      } else {
        // 仓库不存在，添加一项仓库数据
        const warehouseName = row.warehouseSelect.find(
          (item) => item.warehouseId === val
        ).warehouseName;
        target.push({
          warehouseId: val,
          warehouseName: warehouseName,
          details: [
            {
              ...row,
              warehouseId: val,
              warehouseName: warehouseName,
            },
          ],
        });
      }
      // 把当前这条商品从原来的位置删除
      target[index].details.splice(rowI, 1);
      // 未开启负库存
      if (row.isPreSale === 4) {
        // 查找当前切换仓库数据
        const warehouseData = row.warehouseSelect.find(
          (item) => item.warehouseId === val
        );
        // 查找当前仓库在出库列表的数据
        const targetI = target.findIndex((item) => item.warehouseId === val);
        // 查找当前商品在该仓库下出库列表的数据
        const goodsI = target[targetI].details.findIndex(
          (item) => item.skuId === row.skuId
        );
        // 如果当前数量大于该仓库下的库存，推入到未出库数据中
        if (
          target[targetI].details[goodsI].num >
          warehouseData.warehouseInventoryNum
        ) {
          // 拷贝一份未出库数据
          const unassignedData = this.$u.deepClone(this.unassigned_sku_data);
          // 判断当前未出库数据中是否有当前规格的商品
          const unIndex = unassignedData.findIndex(
            (unItem) => unItem.skuId === row.skuId
          );
          // 设置当前未出库商品
          const goods = {
            ...target[targetI].details[goodsI],
            num: this.$NP.minus(
              target[targetI].details[goodsI].num,
              warehouseData.warehouseInventoryNum
            ),
            warehouseId: "",
          };
          // 未出库商品列表有该商品，则替换
          if (unIndex > -1) {
            unassignedData[unIndex] = goods;
          } else {
            // 没有该商品则推入
            unassignedData.push(goods);
          }
          // 给未出库商品列表重新赋值
          this.unassigned_sku_data = unassignedData;
          // 设置当前商品销售量为该仓库的最大库存
          target[targetI].details[goodsI].num =
            warehouseData.warehouseInventoryNum;
        }
      }

      // 给出库数据重新赋值
      this.out_warehouse_data = target;
    },
    // 销售量修改
    saleNumBlur(val, rowI, index, row) {
      // 深拷贝一份商品数据
      const target = this.$u.deepClone(this.out_warehouse_data);

      /*if (val <= 0) {
				this.$nextTick(() => {
					target[index].details[rowI].num = '';
				});
				this.out_warehouse_data = target;
				return;
			}*/
      if (
        target[index].details[rowI].num >
        Number(this.sku_total[target[index].details[rowI].skuId])
      ) {
        target[index].details[rowI].num = Number(
          this.sku_total[target[index].details[rowI].skuId]
        );
        this.out_warehouse_data = target;
        return;
      }
      // 不支持负库存
      if (row.isPreSale === 4) {
        const warehouseData = row.warehouseSelect.find(
          (item) => item.warehouseId === row.warehouseId
        );
        // 输入值大于当前仓库库存数
        if (Number(val) > Number(warehouseData.warehouseInventoryNum)) {
          // 把当前商品的销售量还原
          target[index].details[rowI].num = target[index].details[rowI].numCopy;
        }
      }

      // 深拷贝一份未出库商品数据
      const unassignedData = this.$u.deepClone(this.unassigned_sku_data);
      // 判断当前未出库数据中是否有当前规格的商品
      const unIndex = unassignedData.findIndex(
        (unItem) => unItem.skuId === row.skuId
      );
      // 设置变量num  获取当前合计销售量
      let num = this.totalNumChange(target, row);

      // 判断当前修改后的合计商品销售量是否大于购买数量，大于就把当前商品的销售量还原
      if (num > this.sku_total[row.skuId]) {
        // 修改后的合计商品销售量大于购买数量，把当前商品的销售量设置为空
        target[index].details[rowI].num = "";
      } else if (num === Number(this.sku_total[row.skuId])) {
        // 修改后的合计商品销售量等于购买数量
        // 未出库商品列表有该商品，则删除
        if (unIndex > -1) {
          unassignedData.splice(unIndex, 1);
        }
      } else if (this.$NP.minus(this.sku_total[row.skuId] || 0, num) > 0) {
        // 当前未出库库存大于0
        // 设置当前未出库商品
        const numin = this.$NP.minus(this.sku_total[row.skuId], num);
        const goods = {
          ...this.$u.deepClone(target[index].details[rowI]),
          num: numin,
          numCopy: numin,
          warehouseId: "",
          warehouseName: "",
        };
        // 未出库商品列表有该商品，则替换
        if (unIndex > -1) {
          unassignedData[unIndex] = goods;
        } else {
          // 没有该商品则推入
          unassignedData.push(goods);
          // 如果输入数量为0 ，则把对应出库商品清除
          if (num === 0) {
            target[index].details.splice(rowI, 1);
          }
        }
      }
      // 给未出库商品列表重新赋值
      this.unassigned_sku_data = unassignedData;
      // 给出库商品列表重新赋值
      this.out_warehouse_data = target;
    },
    //未出库数据仓库 打开弹窗
    openUnWarahouse(row, indexUn) {
      this.warahouse_tag = 4;
      this.warehouse_list = row.warehouseSelect;
      this.warehouse_show = true;
      this.un_warehouse_obj = {
        indexUn: indexUn,
        row: row,
      };
    },
    // 未出库数据仓库选择
    unWarehouseChange(arr, { row, indexUn }) {
      const val = arr.value;
      // 深拷贝一份商品数据
      const target = this.$u.deepClone(this.out_warehouse_data);
      // 在出库商品数据中查找选择仓库
      const index = target.findIndex((item) => item.warehouseId === val);
      // 出库商品数据中有该选择的仓库
      if (index > -1) {
        // 找到商品所在下标（位置）
        const goodsI = target[index].details.findIndex(
          (goods) => goods.skuId === row.skuId
        );
        // 该仓库下包含当前商品
        if (goodsI > -1) {
          target[index].details[goodsI].num = this.$NP.plus(
            target[index].details[goodsI].num,
            row.num
          );
        } else {
          // 该仓库下不包含当前商品，把当前商品推到该仓库下面
          target[index].details.push({
            ...row,
            warehouseId: val,
            warehouseName: arr.label,
          });
        }
      } else {
        // 出库商品数据中没有该选择的仓库，添加一项仓库数据
        const warehouseName = row.warehouseSelect.find(
          (item) => item.warehouseId === val
        ).warehouseName;
        target.push({
          warehouseId: val,
          warehouseName: warehouseName,
          details: [
            {
              ...row,
              warehouseId: val,
              warehouseName: warehouseName,
            },
          ],
        });
      }
      // 把当前这条商品从原来的位置删除
      this.unassigned_sku_data.splice(indexUn, 1);
      this.out_warehouse_data = target;
    },
    // 打开提示框
    openModel(content, tag) {
      this.model_content = content;
      this.model_show = true;
      this.model_tag = tag;
    },
    // 审核
    modelConfirm() {
      switch (this.model_tag) {
        case "审核":
          this.updateSaleOutStatus();
          break;
      }
    },
    modelCancel() {},

    // 审核订单
    async updateSaleOutStatus() {
      let flag = false;
      for (let i in this.out_warehouse_data) {
        for (let j in this.out_warehouse_data[i].details) {
          let item1 = this.out_warehouse_data[i].details[j];
          if (!item1.num) {
            flag = true;
            this.$u.toast(
              "商品" +
                item1.materielName +
                "，规格 【" +
                item1.unitName +
                "；" +
                item1.skuName +
                "】的出库数量不能为空"
            );
            break;
          }
          if (item1.otherNum < 0) {
            flag = true;
            this.$u.toast(
              "商品" +
                item1.materielName +
                "，规格 【" +
                item1.unitName +
                "；" +
                item1.skuName +
                "】的其他数量不能小于0"
            );
            break;
          }
        }
      }
      if (flag) {
        return;
      }
      if (!this.out_warehouse_data || !this.out_warehouse_data.length) {
        this.$u.toast({
          type: "warning",
          message: "请选择出库商品",
        });
        return;
      }
      let isNum = true;
      // 过滤 出去没有商品的
      const outWarehouseData = this.out_warehouse_data.filter(
        (item) => item.details && item.details.length > 0
      );
      if (!outWarehouseData.length) {
        this.$message.warning("请选择要出库的商品");
        return;
      }
      for (let i in outWarehouseData) {
        let item = this.out_warehouse_data[i];
        for (let n in item.details) {
          let ntem = item.details[n];
          if (ntem.num <= 0) {
            isNum = false;
            break;
          }
        }
      }
      if (!isNum) {
        this.$u.toast("销售量必须大于0");
        return;
      }
      this.loading = true;
      this.$u.api
        .updateSaleOutStatus({
          id: this.bill_id,
          auditName: this.userInfo.name || "",
          UnassignedSkuData: this.unassigned_sku_data,
          outWarehouseData: outWarehouseData,
        })
        .then((res) => {
          this.loading = false;
          this.$u.toast("操作成功!");
          // 审核成功填写货车信息
          if (this.bill_detail.deliveryType === 3) {
            // this.logistics_show = true;
          }
          this.getInventoryOutInfo();
        })
        .catch((err) => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.detail-view {
  padding-bottom: 100rpx;
  background-color: #f8f8f8;
}

.top-view {
  background: linear-gradient(180deg, #fb5904, #fb7a37, #ff8f59);
  height: 200rpx;
  padding: 0 30rpx;
  color: #ffffff;
  font-size: 40rpx;
  line-height: 100rpx;
  position: relative;

  .status-tag {
    display: inline-block;
    padding: 6rpx 20rpx;
    border-radius: 6rpx;
    font-size: 28rpx;
    margin-top: 30rpx;

    &.status-approved {
      background-color: rgba(140, 193, 82, 0.2);
      color: #8cc152;
    }

    &.status-pending {
      background-color: rgba(251, 89, 4, 0.2);
      color: #fff;
    }
  }

  .float_right {
    font-size: 28rpx;
  }
}

.detail-cont {
  width: 710rpx;
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 20rpx 0;
  overflow: hidden;
  transform: translateY(-80rpx);
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);

  .info-li {
    padding: 0 30rpx;
    line-height: 80rpx;
    border-bottom: 1px solid #f5f5f5;

    &:last-child {
      border-bottom: none;
    }

    .label {
      float: left;
      color: #6c6c6c;
      font-size: 28rpx;
    }

    .value {
      float: right;
      color: #333333;
      font-size: 28rpx;
    }

    .money-label {
      font-weight: bold;
      color: #333333;
    }

    .money-value {
      font-weight: bold;
      font-size: 30rpx;
      color: #fb5904;
    }
  }

  .remark-li {
    padding: 0 30rpx;
    margin-top: 20rpx;

    .label {
      color: #6c6c6c;
      line-height: 60rpx;
      font-size: 28rpx;
    }

    .remark {
      background-color: #f8f8f8;
      padding: 20rpx;
      border-radius: 8rpx;
      color: #666;
      font-size: 26rpx;
      min-height: 100rpx;
    }
  }

  .b-b {
    border-bottom: 1px solid #f5f5f5;
  }

  .goods-title {
    background-color: #fb5904;
    line-height: 72rpx;
    width: 644rpx;
    margin: 30rpx auto 0;
    color: #ffffff;
    border-top-left-radius: 12rpx;
    border-top-right-radius: 12rpx;
    padding: 0 24rpx;
    position: relative;
    z-index: 1;
    font-size: 28rpx;
    font-weight: 500;
  }

  .goods-ul {
    padding: 0 30rpx 30rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid #f5f5f5;
    background-color: #ffffff;

    .goods-li {
      padding-top: 24rpx;
      border-bottom: 1px solid #f5f5f5;
      padding-bottom: 20rpx;

      &:last-child {
        border-bottom: none;
      }

      .goods-img {
        margin-right: 20rpx;

        image {
          width: 150rpx;
          height: 150rpx;
          border-radius: 8rpx;
          display: block;
          background-color: #f5f5f5;
          border: 1px solid #f0f0f0;
        }
      }
      .num-ul {
        display: flex;
        font-size: 24rpx;
        padding-top: 10rpx;
        margin-top: 16rpx;
        background-color: #f9f9f9;
        border-radius: 8rpx;
        padding: 16rpx;

        .num-li {
          flex: 4;
          border-right: 1px solid #ecf0f7;
          text-align: center;
          padding: 0 10rpx;
          &:last-child {
            border-right: 0 none;
          }
          .label {
            color: #879bba;
            margin-bottom: 8rpx;
          }
          .value {
            height: 40rpx;
            line-height: 40rpx;
            border-bottom: 1px solid #fb5904;
            input {
              font-size: 24rpx;
              height: 40rpx;
              line-height: 40rpx;
              text-align: center;
            }
          }
        }
      }
      .info {
        .goods-name {
          height: 34rpx;
          line-height: 34rpx;
          font-weight: 500;
          color: #333;
          font-size: 28rpx;

          .float_left {
            width: 420rpx;
          }
          .float_right {
            font-size: 22rpx;
            color: #999;
          }
        }
        .goods-warehouse {
          padding-bottom: 10rpx;
          color: #fb5904;
          font-weight: 500;

          .float_left {
            width: 590rpx;
          }
        }

        .goods-code {
          font-size: 24rpx;
          padding-top: 10rpx;
          color: #999;
        }

        .goods-num {
          padding-top: 10rpx;
          font-size: 24rpx;
          color: #666;

          .price {
            font-size: 28rpx;
            font-weight: bold;
            color: #fb5904;
          }

          input {
            vertical-align: middle;
            display: inline-block;
            width: 150rpx;
            line-height: 60rpx;
            border: 1px solid #f0f0f0;
            border-radius: 8rpx;
            padding: 0 10rpx;
            background-color: #f9f9f9;
          }
        }
      }
      .list-info {
        width: 470rpx;
      }
    }
  }
}

.detail-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100rpx;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

  .handel-btn {
    width: 90%;
    height: 80rpx;
    line-height: 80rpx;
    background: linear-gradient(90deg, #fb5904, #ff8f59);
    border-color: #fb5904;
    color: #ffffff;
    text-align: center;
    border-radius: 40rpx;
    font-size: 30rpx;
    box-shadow: 0 4rpx 8rpx rgba(251, 89, 4, 0.3);
  }
}
</style>
